<template>
  <div class="goods-item" @click="itemClick">
    <img :src="goodsItem.img" @load="imageLoad"/>
    <p>{{goodsItem.title}}</p>
    <div>
        <span class="price">{{goodsItem.price}}元</span>
        <span class="collection">{{goodsItem.collection}}</span>
    </div>
  </div>
</template>
<script>
export default {
    name: 'GoodsListItem',
    props: {
        goodsItem: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        imageLoad() {
            this.$bus.$emit('itemImageLoad')
        },
        itemClick() {
            this.$router.push('/detail/' + this.goodsItem.id)
        }
    }
}
</script>
<style scoped>
  .goods-item {
      width: 48%;
  }
  .goods-item img {
      width: 100%;
      border-radius: 3px;
  }
  .goods-item p {
      font-size: 15px;
  }
  .price, .collection {
      font-size: 12px;
      margin-right: 8px;
  }
  .price {
      color: var(--color-tint);
  }
</style>
